<template>
  <div v-if="order">
    <a-modal
      title="订单打印"
      :mask-closable="false"
      :destroy-on-close="true"
      :visible="visible"
      :footer="null"
      :width="850"
      @cancel="$emit('update:visible', false)"
    >
      <div id="print" style="color: black; line-height: 30px">
        <h2 style="text-align: center; font-weight: bold; font-size: 28px">赤店系统</h2>
        <a-row>
          <a-col :span="8"> 订单号：{{ order.order_no }} </a-col>
          <a-col :span="8"> 客户电话：{{ order.mobile }} </a-col>
          <a-col :span="8"> 下单时间：{{ order.created_at }} </a-col>
        </a-row>
        <a-row>
          <a-col :span="8"> 客户： {{ order.nickname }}</a-col>
          <a-col :span="16"> 客户地址：{{ order.address }} </a-col>
        </a-row>
        <table class="goods_table" cellpadding="5" cellspacing="5" width="100%">
          <thead>
            <tr>
              <td style="background: #ccc" v-for="(th, index) in tHead" :key="index">{{ th }}</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in order.goods_list" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ item.name }}</td>
              <td v-if="item.order_type == 0">{{ item.attr_list.map((el) => el.attr_name).join(',') }}</td>
              <td><img v-if="item.code_path" :src="item.code_path" alt="" style="width: 202px; height: 30px" /></td>
              <td>{{ item.unit }}</td>
              <td>{{ item.num }}</td>
              <!-- <td>{{ item.total_price }}</td> -->
              <td>{{ item.total_price }}</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="6">合计金额：</td>
              <td>{{ order.pay_price }}</td>
            </tr>
          </tfoot>
        </table>
        <!-- <a-row style="margin-bottom: 10px">
          <a-col :span="12">
            <div>联系电话：17090402350</div>
            <div>地址：赤店</div>
            <div>产品注明：赤店版权所有</div>
          </a-col>
          <a-col :span="12">
            <img src="" style="width: 50%" />
            <img src="" style="width: 50%" />
          </a-col>
        </a-row> -->
      </div>
      <div style="text-align: center">
        <a-button v-print="'#print'" type="primary">确认打印</a-button>
        <a-button style="margin-left: 10px" type="danger" @click="$emit('update:visible', false)">取消打印</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    order: {
      type: Object,
      default: '',
    },
  },
  data() {
    return {
      tHead: ['序', '产品名称', '规格', '条码', '单位', '数量', '金额'],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  updated() {},
  methods: {
    printBut() {
      this.$print(this.$refs.print)
    },
  },
}
</script>

<style scoped lang="less">
.goods_table {
  margin: 10px 0;
  color: black;
  border: 1px solid black;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: grey;
  td {
    border: 1px solid black;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: black;
  }
}
</style>